<template>
  <div class="login3">
    <img src="@/assets/img/login/Icon-yuyin.png" alt="" class="yuyin" />
    <img src="@/assets/img/login/logo.png" alt="" class="logo" />
    <h3>欢迎来到“谁是凶手”</h3>
    <p>这是一个多人语音角色扮演推理游戏平台，游戏的主旨是找到故事中的凶手</p>
    <div class="btn">
      <p>请选择</p>
      <img
        src="@/assets/img/login/Button-old.png"
        alt=""
        @click="$router.push('/home')"
      />
      <img
        src="@/assets/img/login/Button-new.png"
        alt=""
        @click="$router.push('/home')"
      />
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.login3 {
  background-image: url(@/assets/img/login/Background-3.png);
  background-repeat: no-repeat;
  background-size: 130% 130%;
  background-position: -40px -180px;
  .yuyin {
    width: 42px;
    height: 38px;
    margin-top: 61px;
    margin-left: 668px;
  }
  .logo {
    display: block;
    width: 236px;
    height: 110px;
    margin: 0 auto;
    margin-top: 134px;
  }
  h3 {
    text-align: center;
    margin-top: 87px;
    font-size: 50px;
    font-family: ZiZhiQuXiMaiTi;
    font-weight: 700;
    color: #ffffff;
  }
  p {
    text-align: center;
    width: 551px;
    font-size: 32px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #ffffff;
    margin: 0 auto;
    margin-top: 46px;
  }
  .btn {
    margin-top: 136px;
    text-align: center;
    p {
      font-size: 24px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #666666;
    }
    img {
      margin-top: 30px;
      width: 500px;
      height: 120px;
    }
  }
}
</style>
